<template>
  <div>
    <!-- <div class="bar">
      <img src="/static/bar/bbs_bar1.jpg" alt="">
    </div>-->
    <div class="list">
      <div v-for="(item, index) of bbsClassList" :key="index">
        <router-link
          tag="div"
          class="item flex-box"
          :to="{ path: '/bbs/list', query: { id: item.id } }"
          :key="index"
        >
          <img :src="item.photo" :alt="item.title" class="icon">
          <div class="info flex flex-box">
            <div class="title">{{ item.title }}</div>
            <div class="count">今日：0 活跃：0 总贴：0</div>
          </div>
        </router-link>
        <line-hr/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    bbsClassList() {
      return this.$store.state.bbs_class_list;
    }
  },
  components: {},
  methods: {},
  created() {
    this.$store.dispatch("getBbsClassList");
  }
};
</script>

<style scoped lang="less">
.bar {
  // padding: .75rem;
  img {
    width: 100%;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.25rem #aaa;
  }
}
.list {
  // padding: .75rem;
}
.item {
  margin: 0.375rem 0.75rem;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    right: 0.8rem;
    top: 50%;
    margin-top: -0.5rem;
    width: 0.8rem;
    height: 0.8rem;
    background-image: url(/static/svg/arrow-right.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .icon {
    margin-right: 0.375rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.1rem;
  }
  .info {
    flex-direction: column;
    justify-content: center;
    .title {
      margin-bottom: 0.25rem;
      font-size: 0.9rem;
      // font-weight: 600;
    }
    .count {
      color: #999;
    }
  }
}
</style>
